<template>
  <view class=" font_family" >
    <view class="header f_j" :style="{top:menuButtonInfo+'px'}">
      <u-icon name="arrow-left" @click="back"></u-icon>
    </view>
    <view class="bg">
      <image class="bg_img" :src="detail.images_fm" mode="widthFix"></image>
      <!-- <view class="bg_title">路线推荐</view> -->
    </view>

    <!-- 导游信息 -->
    <!--		<view class="guide_msg" v-if="detail" :class="{guide_msg2:common.mp_switch==0}">
          <view class="top f">
            &lt;!&ndash; <view class="avatar">
              <u-avatar :src="detail.avatar" size="106rpx" mode="aspectFill"></u-avatar>
            </view> &ndash;&gt;
            <view class="msg">
              <view class="name f">
                <text>{{detail.title}}</text>
                <button open-type="share" class="f_zj">
                  <image class="icon" src="../../static/public/zf.png" mode=""></image>
                </button>
              </view>
              <view class="remarks f">
                <view class="f_j">
                  <text class="text">实名认证</text>

                </view>
              </view>
            </view>
          </view>
          <view class="bottom " v-if="common.mp_switch==1999">
            <view class="box f_z_b">
              <view class="item f_d f_j">
                <view class="text">
                  月服务数
                </view>
                <view class="num">
                  {{detail.month_servers}}
                </view>
              </view>
              <view class="item f_d f_j">
                <view class="text">
                  好评率
                </view>
                <view class="num">
                  {{detail.good_rate}}%
                </view>
              </view>
              <view class="item f_d f_j">
                <view class="text">
                  入驻时间
                </view>
                <view class="num">
                  {{detail.create_time}}
                </view>
              </view>
            </view>
          </view>
        </view>-->
    <!-- 列表 -->
    <view class="list" v-if="detail.product" style="margin-top:-5px;">
    <!-- <view class="tab">
       <u-tabs :list="list1"
               @click="tabClick"
               lineWidth="60"
               lineColor="gold"
               :activeStyle="{color: 'gold',fontWeight: 'bold',fontSize:'32rpx'}"
               :inactiveStyle="{color: 'gold',fontSize:'28rpx'}"></u-tabs>
     </view> -->
      <view class="item" v-for="(item,index) in detail.product" :key="index" @click="go_order(item.id)">


          <image class="item_img" :src="item.image" mode="aspectFill"></image>

        <view class="item_content">
          <view class="title">
            <!-- 梅里环线|穿越三江并流 8晚9天 -->
			{{item.title}}
          </view>
         <!-- <view class="intro">
            石月亮2晚-丙中洛2晚-茨中/梅里-梅里-香格里拉-丽江
          </view> -->
          <view class="text text_ellipsis2" >
            <!-- 这里是亚洲最迷人的地区之一。四列魏峨山脉夹裹着怒江、澜沧江与金沙江自北向南奔流，令人神往的梅里雪山坐落中央，勾勒出大喜马拉雅东端的壮美景色。这个星球的多元和多彩似乎都被浓缩在了这1.7万平方公里的土地上一在面积大致相当于一个北京市的地理空间中孕育出了多样的动植物与不同民族独特的生活方式，不同的文化、宗教在这里碰撞、融合，散发出人类文明的夺目光彩。 -->
          	{{item.shorttitle}}
		  </view>
          <view class="tag">
           <view class="tag_new" v-for="item1 in item.lable_multiplejson"> {{item1.time}}</view>

          </view>
          <view class="price">
            ￥{{item.price}} /人起
          </view>
        </view>
      </view>
      <view class="" v-if="detail.product.length==0">
        <u-empty text='没有数据啦~' icon="/static/public/kong.png">
        </u-empty>
      </view>
    </view>
		<kefu ></kefu>
  </view>
</template>

<script>
import {mapState} from 'vuex'
import {guide_detail} from '@/api/index_menu/index.js'

export default {
  data() {
    return {
      menuButtonInfo: 0,
      id: '', //导游id
      detail: '',
      list1:[{name:'热门产品推荐'},{name:'本地体验推荐'},]
    };
  },
  computed: {
    ...mapState(['common'])
  },
  onShareAppMessage() {
    return {
      title: this.detail.username,
      imageUrl: detail.back_avatar,
    }
  },
  onShareTimeline() {

  },
  onLoad(e) {
    // #ifdef MP-WEIXIN
    this.menuButtonInfo = uni.getMenuButtonBoundingClientRect().top
    // #endif
    // #ifdef H5
    this.menuButtonInfo = 20
    // #endif
    this.id = e.id
    this.get_detail()
  },
  methods: {
    tabClick(index) {
      console.log(index)
    },

    back() {
      uni.navigateBack({
        delta: 1
      })
    },
    go_order(id) {
      uni.navigateTo({
        url: '/pagesA/index_menu/guide_order_detail?id=' + id
      })
    },
    // 获取导游详情
    get_detail() {
      guide_detail({id: this.id}).then(res => {
        console.log(res)
        if (res.code == 1) {
          this.detail = res.data
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.header {

  position: fixed;
  left:30rpx;
  z-index: 999999;
  background-color: white;
  width: 50rpx;
  height:50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 999rpx;
  .back {
    width: 18rpx;
    height: 36rpx;


  }

}
.bg {
  position: relative;

  .bg_img {
    width: 100%;
    border: 1px solid black;
  }

  .bg_title {
    position: absolute;
    top: 200rpx;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 40rpx;
    color: #fff;
  }
}
.list{
  background-color: #000000;
  padding: 40rpx;
  .tab{
    display: flex;
    justify-content: center;
  }
  .item_img{
    width: 100%;
    height: 380rpx;

  }
  .item{
    margin-top: 40rpx;
    .item_content{
      margin-top: -10rpx;
      background-color: white;
      padding: 20rpx;
      font-weight: normal!important;
      .title{
        font-weight: bold;
        font-size: 32rpx;
      }
      .intro{
        margin-top: 10rpx;
        font-weight: normal;
        font-size: 28rpx;
      }
      .text{
        margin-top: 10rpx;
        font-weight: normal;
        font-size: 22rpx;
        color: gray;
      }
      .tag{
        margin-top: 10rpx;
        display: flex;
        view{
          margin-right: 10rpx;
        }
      }
      .price{

      }
    }
  }

}
</style>